<template>
  <view class="button-container">
    <u-button class="left-button" @click="onLeftButtonClick">扫码报工</u-button>
    <u-button class="right-button" @click="onRightButtonClick">提交报工</u-button>
  </view>
</template>

<script>
export default {
  methods: {
    onLeftButtonClick() {
      this.$emit('left-click');
    },
    onRightButtonClick() {
      this.$emit('right-click');
    }
  }
}
</script>

<style scoped>
.button-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  width: 80%;
  max-width: 600px;
}

.left-button {
  flex: 1;
  border-radius: 20px 0 0 20px; /* 圆角设置 */
  background-color: #007aff; /* 深蓝色 */
  color: white; /* 文字颜色 */
}

.right-button {
  flex: 1;
  border-radius: 0 20px 20px 0; /* 圆角设置 */
  background-color: #66b3ff; /* 浅蓝色 */
  color: white; /* 文字颜色 */
}

.left-button, .right-button {
  margin: 0; /* 去掉间距 */
}
</style>
